<script setup>

//表单对象
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doGet, doPost} from "@/util/request.js";
import {showMessage} from "@/util/message.js";

//获取路由参数
const route = useRoute()
const router = useRouter()
const userDetail = ref({})
//弹窗显示
const dialogVisible = ref(true)

//根据id获取商户信息
const loadUserDetail = (id) => {
  //发送请求，获取用户详情
  doGet('/user/detail/' + id, {}).then(resp => {
    if (resp.data.code === 200) {
      userDetail.value = resp.data.data
    } else {
      showMessage('查询用户详情失败', resp.data.msg, 'error')
    }
  })
}

//提交类型
const type = ref('add')
//创建表单验证规则
const editUser = {
  loginName: [
    {required: true, message: '请输入登录名称', trigger: 'blur'},
    {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur'}
  ],
  shopName: [
    {required: true, message: '请输入商户名称', trigger: 'blur'},
    {min: 2, max: 80, message: '长度在 2 到 80 个字符', trigger: 'blur'}
  ],
  shopScope: [
    {required: true, message: '请输入经营范围', trigger: 'blur'},
    {min: 10, max: 160, message: '长度在 10 到 160 个字符', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入联系电话', trigger: 'blur'},
    {min: 11, max: 11, message: '长度为11位', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  userEmail: [
    {required: true, message: '请输入邮箱地址', trigger: 'blur'},
    {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
  ]
}

//创建表单对象
const editFrom = ref({})
//提交表单
const submitForm = () => {
  editFrom.value.validate(valid => {
    if (valid) {
      //表单参数
      const data = {
        id: userDetail.value.id,
        userNo: userDetail.value.userNo,
        loginName: userDetail.value.loginName,
        shopName: userDetail.value.shopName,
        phone: userDetail.value.phone,
        userEmail: userDetail.value.userEmail,
        shopScope: userDetail.value.shopScope
      }
      if (type.value === 'add') {
        doPost('/user/edit', data).then(resp => {
          if (resp.data.code === 200) {
            //提示信息
            showMessage('添加用户成功', 'success')
            //等待600毫秒
            setTimeout(() => {
              //返回上一页
              router.go(-1)
            }, 500)
          } else {
            //提示信息
            showMessage('添加用户失败' + resp.data.msg, 'error')
          }
        })
      } else {
        //发送请求，提交表单
        doPost('/user/edit', data).then(resp => {
          if (resp.data.code === 200) {
            showMessage('编辑用户成功', 'success')
            router.back()
          } else {
            showMessage('编辑用户失败' + resp.data.msg, 'error')
          }
        })
      }
    }
  })
}

//重置表单
const cz = () => {
  editFrom.value.resetFields()
}

onMounted(() => {
  let userNo = route.params.userNo
  if (userNo) {
    type.value = 'edit'
    loadUserDetail(userNo)
  } else {
    type.value = 'add'
  }
})
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      width="500"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :show-close="false"
      :title="type==='edit'?'编辑商户':'创建商户'">
    <el-form
        ref="editFrom"
        :rules="editUser"
        :model="userDetail">
      <el-form-item label="登录名称: " prop="loginName">
        <el-input v-model="userDetail.loginName" placeholder="请输入登录名称"/>
      </el-form-item>

      <el-form-item label="商户名称: " prop="shopName">
        <el-input v-model="userDetail.shopName" placeholder="请输入商户名称"/>
      </el-form-item>

      <el-form-item label="联系电话: " prop="phone">
        <el-input v-model="userDetail.phone" placeholder="请输入联系电话"/>
      </el-form-item>

      <el-form-item label="商户邮箱: " prop="userEmail">
        <el-input v-model="userDetail.userEmail" placeholder="请输入商户邮箱"/>
      </el-form-item>

      <el-form-item label="经营范围: " prop="shopScope">
        <el-input v-model="userDetail.shopScope" placeholder="请输入经营范围"/>
      </el-form-item>


    </el-form>
    <div :style="type==='add'?'margin-left: 250px':'margin-left: 300px'">
      <el-button @click="cz" v-if="type === 'add'">重置</el-button>
      <el-button type="info" @click="router.back()">返回</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>